<template>
  <div>
    <div class="public-common">
        <div class="public-title" style="text-indent: 20px;;">外部文件收发列表</div>
        <div class="inline-btn">
          <label>文号：</label>
          <el-input v-model="searchdata.txtFileNo"></el-input>
          <label>文件标题：</label>
          <el-input v-model="searchdata.txtFileName"></el-input>
          <label>收发人：</label>
          <el-input v-model="searchdata.txtRecvSentMan"></el-input>
        </div>
        <div class="inline-btn">
          <label>收发单位：</label>
          <el-input v-model="searchdata.txtRecvSentOrg"></el-input>
          <el-button type="primary" @click="searchBtn">搜索</el-button>
          <el-button type="primary" @click="addBtn">新建</el-button>
          <el-button type="warning" @click="deleteBtn">删除</el-button>
        </div>
        <div class="" style="margin:2%;">
          <el-table :data="tableData" border width="100%" @selection-change="handleSelectionChange">
            <el-table-column type="index" width="50" label=" " fixed="left"></el-table-column>
            <el-table-column type="selection"  width="55"></el-table-column>
            <el-table-column prop="FileNo"  label="文号" ></el-table-column>
            <el-table-column prop="FileName"  label="文件标题" ></el-table-column>
            <el-table-column prop="RecvSentTime"  label="收发时间" ></el-table-column>
            <el-table-column prop="RecvSentMan"  label="收发人" ></el-table-column>
            <el-table-column prop="RecvSentOrg"  label="收发单位" ></el-table-column>
            <el-table-column prop="SentFlag"  label="收发标志" ></el-table-column>
            <el-table-column label="下载扫描件" fixed="right">
              <template slot-scope="scope">
                <el-button type="text" class="el-icon-download" @click="downBtn(scope.row)" size="mini">下载</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            @size-change="handleSizeChange"  @current-change="handleCurrentChange"  :current-page="currentPage"
            :page-sizes="pagerange"  class="mt"  :page-size="pagesize"
            layout="total, sizes, prev, pager, next, jumper"  :total="totalnum"  ></el-pagination>
        </div>
    </div>
    <!--dialog-->
    <el-dialog title="卫生检查记录" :visible.sync="dialogVisible">
      <span>
        <el-form ref="formData" :model="formData" width="50%" style="margin-left:2%;" :rules="formRule" label-width="120px">
        <el-form-item label="文件标题：" prop="txtFileName">
          <el-input v-model="formData.txtFileName" style="width: 220px;"></el-input>
        </el-form-item>
        <el-form-item label="文件文号：" prop="txtFileNo">
          <el-input v-model="formData.txtFileNo" style="width: 220px;"></el-input>
        </el-form-item>
        <el-form-item label="扫描件：" prop="fileUpload">
          <input type="file" style="width:220px;" ref="inputer">
        </el-form-item>
        <el-form-item label="时效性：">
          <el-input v-model="formData.txtRecvSentMan" style="width: 100px;"></el-input>
          <el-select v-model="formData.TimeType" style="width: 100px;">
            <el-option label="小时" value="hours"></el-option>
            <el-option label="天" value="days"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="收发人：" prop="txtRecvSentMan">
          <el-input v-model="formData.txtRecvSentMan" style="width: 220px;" value='管理员'></el-input>
        </el-form-item>
        <el-form-item label="收发单位：" prop="txtRecvSentOrg">
          <el-input v-model="formData.txtRecvSentOrg" style="width: 220px;" value='管理处'></el-input>
        </el-form-item>
        <el-form-item label="收发时间：" prop="txtRecheckTime">
          <el-date-picker  type="datetime" v-model="formData.txtRecheckTime" format="yyyy-MM-dd HH:mm" value-format="yyyy-MM-dd HH:mm"></el-date-picker>
        </el-form-item>
      </el-form>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitData('formData',1)">应用</el-button>
        <el-button type="primary" @click="submitData('formData',2)">确 定</el-button>
        <el-button @click="cancelBtn('formData')">取 消</el-button>
      </span>
    </el-dialog>
    <!--el-dialog-->
    <el-dialog :visible.sync="dialogVisible1">
      <span>
        <img :src="imgurl" style="width:360px;"/>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible1 = false">关 闭</el-button>
      </span>
    </el-dialog>
    <!--el-dialog-->
  </div>
</template>
<script>
import {external} from '@/ajax';
import common from '@/utils/common.js';
import config from './Manage.js';
export default {
    data(){
        return {
          searchdata:{
            txtFileNo:'',txtFileName:'',txtRecvSentMan:'',txtRecvSentOrg:''
          },
          totalnum: 0,
          currentPage: 0,
          pagerange: [2, 10, 20, 50, 100],
          pagesize: 10,
          tableData:[],
          dialogVisible:false,
          formData:{txtExpiryHours:'',fileUpload:'',txtFileNo:'',txtFileName:'',
                    txtRecvSentOrg:'',txtRecvSentMan:'',TimeType:'hours',txtRecvSentTime:''},
          formRule:{
            txtFileName:{required:true,message:'请添加文件标题',trigger:'blur'},
            //fileUpload:{required:true,message:'请上传扫描件',trigger:'blur'},
            txtRecvSentTime:{required:true,message:'请选择收发时间',trigger:'blur'},
          },
          index:0,
          selection:[],
          dateData:'',
          dialogVisible1:false,
          imgurl:'',
          common:common,
          config:config
        }
    },
    mounted(){
      this.getExternalFileList();
      var date = new Date();
      let month1 = date.getFullYear()+'-'+(date.getMonth()+1)+'-'+date.getDay();
      this.dateData = month1+' '+date.getHours()+':'+date.getMinutes()+':00';
    },
    inject:['reload'],
    methods:{
      //getExternalFileList,addExternalFile,deleteExternalFile
      searchBtn(){
        this.getExternalFileList();
      },
      //
      handleSelectionChange(val){
        if(val){
          this.selection = [];
          for (let i in val) {
            this.selection.push(val[i]['FileID'])
          }
        }
      },
      getExternalFileList(){
        this.searchdata['page'] = this.pagesize;
        this.searchdata['rows'] = this.currentPage;
        this.tableData =config.assetsList;
        this.totalnum = this.tableData.length;
        /* external.getExternalFileList(this.searchdata).then((res) => {
          if (res.data.code == '00000') {
            if(res.data.data.length > 0){
              this.tableData = res.data.data;
              this.totalnum = this.tableData.length;
            }else{
              this.tableData = [];
              this.totalnum = 0;
            }
          } else {
            this.$message(res.data.message);
          }
          }).catch(()=>{
            this.$message('服务器正忙，获取固定资产列表失败');
          }) */
      },
      //分页
      handleSizeChange(val){
          this.pagesize = val;
          this.getExternalFileList();
      },
      handleCurrentChange(val){
          this.currentPage = val;
          this.getExternalFileList();
      },
      addBtn(){
        this.formData.txtRecheckTime = this.dateData
        this.dialogVisible = true;
      },
      cancelBtn(form){
        this.$refs[form].clearValidate();
        this.$refs[form].resetFields();
        this.dialogVisible=false;
      },
      deleteBtn(){
        if(this.selection.length <= 0){
          this.$message('请选择要操作的数据')
        }else{
           external.deleteExternalFile({assetNo:JSON.stringify(this.selection)}).then((res) => {
              if (res.data.code == '00000') {
                this.reload()
              } else {
                this.$message(res.data.message);
              }
            }).catch(()=>{
              this.$message('服务器正忙，删除失败');
            })
        }
      },
      //进行添加（通过type区分应用确定，应用1确定2）
      submitData(form,type){
        this.$refs[form].validate((valid) => {
          if(valid){
            let formData = new FormData();
            let inputDOM = this.$refs.inputer;
            let imgMsg = inputDOM.files[0];
            if(!imgMsg){
              this.$message('请上传扫描件')
            }else{
              formData.append('file', imgMsg);
              this.formData.fileUpload = formData
              console.log('fiel',this.formData.fileUpload)
              external.addExternalFile(this.formData).then((res) => {
                  if (res.data.code == '00000') {
                    if(type == 1){
                      this.$refs[form].resetFields();
                    }else{
                      this.reload()
                    }
                  } else {
                    this.$message(res.data.message);
                  }
                }).catch(()=>{
                  this.$message('服务器正忙，操作失败');
              })
            }
          }else{
            return false
          }
        })
      },
      downBtn(row){
        //根据文件类型 图片则弹窗框展示，文件则下载？
        if(row.fileUpload){
          let filetype = row.fileUpload.split('.');
          let imgType =['jpg','jpeg','png','gif']
          let flag = filetype[filetype.length - 1]
          console.log('jpeg',common.checkStringInArr(flag,imgType))
          if(common.checkStringInArr(flag,imgType)){
            this.imgurl = row.fileUpload
            this.dialogVisible1 = true
          }else{
            window.location.href = row.fileUpload;
            //common.exportExcel(row.fileUpload,'扫描文件',"application/vnd.ms-excel",flag)
          }
        }else{
          this.$message('没有要下载的扫描件')
        }
      }
    },
    watch:{

    }
}
</script>
<style lang="scss">
.public-common{
    .public-title{line-height: 30px;background-color: #deecfd;}
    .inline-btn{display: inline-flex;margin: 20px;
      label{width:100px;line-height: 32px;margin-left:10px;text-align: right;}
      .el-input{width: 170px;}
      .el-button{margin-left:10px;}
    }
    .el-form-item .el-input,.el-select,.el-date-picker{width: 200px !important;}
    .left{display: inline-block;;width:64%;float: left;}
    .right{display: inline-block;;width:35%;float: left;}
    .el-form .inline-btn{margin:unset;}
    .footer{
      width: 100%;
      display: inline-flex;
      margin-left: 72%;
    }
}
</style>
